To achieve that specific layout—with the Title on one line and the metadata (date, tags, and read time) on the line below—you should wrap the metadata in a container (like a

or

) and use a small loop to display the tags.
Here is the updated code for your layout.njk:

HTML

{{ title }}

{% if tags and "post" in tags %}

{# Line 2: Date, Tags, and Read Time #} {{ page.date | postDate }} •

{# Loop to show tags, excluding the 'post' tag itself #}
{% for tag in tags %}
{% if tag != "post" %}

{{ tag }}

{% endif %}
{% endfor %}

• {{ content | readTime }}

{% endif %}

{{ content | safe }}

Key Changes Made:

  • Structural Block: I wrapped the metadata in a
    . Since
    is a block-level element, it automatically pushes the metadata to a new line below the

    .

  • Tag Loop: I added a Nunjucks {% for %} loop. It checks each tag and prints it only if it isn't the generic "post" tag.
  • Visual Polish:
    • Used margin-top: -10px to pull the metadata slightly closer to the title (optional, adjust as you like).
    • Added a light grey background to the tags to make them look like "pills" or "badges."
    • Set the font size to 0.9rem so the metadata doesn't compete with the main title.

Cleaning up your CSS

If you prefer not to use "inline styles" (the style="..." part), you can move those rules into your public/style.css file:
In public/style.css:

CSS

.post-metadata {
margin-bottom: 20px;
color: #666;
font-size: 0.9rem;
}

.post-tag {
background: #f0f0f0;
padding: 2px 8px;
border-radius: 3px;
margin-right: 4px;
color: #333;
}

In layout.njk:

HTML

{{ page.date | postDate }} • {% for tag in tags %} {% if tag != "post" %}{{ tag }}{% endif %} {% endfor %} • {{ content | readTime }}

Would you like me to make the tags clickable so that clicking a tag takes the reader to a page showing all posts with that tag?